<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
  >
    <path
      d="M18.65 1.83L14.61 1.83C13.02 1.83 12.38 2.46996 12.38 4.05997L12.38 8.10003C12.38 9.69003 13.02 10.33 14.61 10.33L18.65 10.33C20.24 10.33 20.88 9.69003 20.88 8.10003L20.88 4.05997C20.88 2.46996 20.24 1.83 18.65 1.83Z"
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
    ></path>
    <path
      d="M8.10004 1.83L4.05999 1.83C2.46998 1.83 1.83002 2.40002 1.83002 3.80995L1.83002 8.33988C1.83002 9.75991 2.46998 10.3198 4.05999 10.3198L8.10004 10.3198C9.69005 10.3298 10.33 9.75991 10.33 8.3499L10.33 3.80995C10.33 2.40002 9.69005 1.83 8.10004 1.83Z"
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
    ></path>
    <path
      d="M8.10004 12.38L4.05999 12.38C2.46998 12.38 1.83002 13.02 1.83002 14.61L1.83002 18.65C1.83002 20.24 2.46998 20.88 4.05999 20.88L8.10004 20.88C9.69005 20.88 10.33 20.24 10.33 18.65L10.33 14.61C10.33 13.02 9.69005 12.38 8.10004 12.38Z"
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linejoin="round"
    ></path>
    <path
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linecap="round"
      d="M13.29 16.04L18.79 16.04"
    ></path>
    <path
      :stroke="active ? activeColor : inactiveColor"
      :style="style"
      stroke-width="1.5"
      stroke-linecap="round"
      d="M16.04 13.29L16.04 18.79"
    ></path>
    <g opacity="0.0001"></g>
  </svg>
</template>

<script>
  import config from './config' // 导入配置文件
  const { transionDuration, activeColor, inactiveColor } = config

  export default {
    name: 'operation-data-svg',
    props: {
      active: { default: false },
      transiton: {
        type: Number,
        default: transionDuration,
      },

      activeColor: {
        type: String,
        default: activeColor,
      },
      inactiveColor: {
        type: String,
        default: inactiveColor,
      },
    },
    computed: {
      style() {
        return { transition: `stroke ${this.transiton}s ease` }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
